<template>
    <el-dialog
        :close-on-click-modal="false"
        title="来电提醒"
        class="re-dialog tip-dialog"
        :class="{'show-box':showBox}"
        :visible.sync="dialogVisible"
        height="400px"
        width="70vmin"
    >
        <div class="tip-content">
            <div>
                <p class="come-tel">{{websocketData.telOtherNum||'-'}}</p>
                <p class="come-name">{{websocketData.contacts}}</p>
            </div>
            <div class="local-tel">
                <span>本机号码：</span>
                <span>{{websocketData.telMyNum||'-'}}</span>
            </div>
        </div>
        <div class="button-row">
            <button @click="onHandleClick('2')">
                <img src="../../assets/8512345/create-icon.png" alt /> 创建事件
            </button>
            <button @click="onHandleClick('1')">
                <img src="../../assets/8512345/create-msg-icon.png" alt /> 快捷短信
            </button>
        </div>
        <img class="tel-icon" src="../../assets/8512345/income-tel.png" alt />
        <div v-if="activeIndex==1" class="msg-detail">
            <div class="title-row">快捷短信</div>
            <div class="msg-content">
                <div class="left-content">
                    <div class="msg-title-row">
                        <span>知识库</span>
                    </div>
                    <div class="search-row">
                        <input
                            maxlength="50"
                            v-model="request.keyword"
                            placeholder="请输入标题..."
                            class="search-input"
                            type="text"
                        />
                        <button @click="reset" class="reset-btn">重置</button>
                        <button @click="getLibList" class="search-btn">
                            <img src="../../assets/8512345/search.png" alt />
                        </button>
                    </div>
                    <ul class="kn-ul">
                        <li
                            v-for="(item,index) in libList"
                            :key="index"
                            :class="{'active':libActive.id==item.id}"
                            @click="clickLibItem(item)"
                        >
                            <div class="kn-list">
                                <span class="target">{{(index+1)||1}}</span>
                                <div class="cell-label">
                                    <div class="text-over">{{item.title}}</div>
                                </div>
                            </div>
                        </li>
                        <div v-if="!libList.length" class="no-data">
                            <img src="../../assets/no-data.png" alt />
                        </div>
                    </ul>
                </div>
                <div class="right-content">
                    <div class="msg-title-row line">
                        <span>答复</span>
                    </div>
                    <div
                        class="reply-content"
                        :class="{'msg-disabled':!libActive}"
                    >{{libActive?libActive.content:'请点击选择左侧知识库标题'}}</div>
                    <div class="reply-handle-row">
                        <div class="reply-tel">{{websocketData.telOtherNum}}</div>
                        <button
                            @click="pushSmsSend"
                            :disabled="messageDis"
                        >{{messageDis?'发送中……':'发送'}}</button>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="activeIndex==2" class="msg-detail create-detail">
            <div class="title-row">创建事件</div>
            <div class="create-content">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
                    <el-row v-for="(sItem,index) in formConfig" :key="index">
                        <el-col :span="20">
                            <el-form-item v-bind:label="sItem.label" v-bind:prop="sItem.code">
                                <el-input
                                    v-if="sItem.type === 'input'"
                                    v-bind:placeholder="sItem.placeholder"
                                    v-model="ruleForm[sItem.code]"
                                ></el-input>
                                <el-input
                                    v-if="sItem.type == 'textarea'"
                                    type="textarea"
                                    style="resize:none"
                                    :placeholder="sItem.placeholder"
                                    v-model="ruleForm[sItem.code]"
                                    :maxlength="sItem.maxlength"
                                    show-word-limit
                                />
                                <el-select
                                    class="w-100"
                                    v-else-if="sItem.type === 'select'"
                                    v-model="ruleForm[sItem.code]"
                                    v-bind:placeholder="sItem.placeholder"
                                >
                                    <el-option
                                        v-for="(ssItem,ssIndex) in sItem.data"
                                        :key="ssIndex"
                                        v-bind:label="ssItem.dictDataName"
                                        v-bind:value="ssItem.dictDataCode"
                                    ></el-option>
                                </el-select>
                                <el-date-picker
                                    class="w-100"
                                    v-else-if="sItem.type === 'datePicker'"
                                    v-model="ruleForm[sItem.code]"
                                    type="date"
                                    size="small"
                                    :placeholder="sItem.placeholder"
                                    value-format="yyyy-MM-dd"
                                ></el-date-picker>
                                <span
                                    style="color:#1a36a9"
                                    v-if="sItem.type == 'span'"
                                >{{ruleForm[sItem.code]||sItem.value}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <button class="footer-btn cancel" @click="cancelCreate">取 消</button>
                <button @click="onSubmit('ruleForm')" class="footer-btn sure">确定</button>
            </span>
        </div>
    </el-dialog>
</template>

<script>
import Pubsub from "../../utils/pubsub";
import {
    findByDictCode,
    departmentGetDepartment,
    ZHZXEventInfoEventNumberCanUse,
    ZHZXEventInfoAdd,
    knowledgeLibQueryAll,
    smsSend
} from "../../config/api.js";
import { getTimeStr } from "../../utils";
export default {
    props: ["list", "total"],
    data() {
        var validateEventNumber = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("工单号不能为空"));
            }
            setTimeout(() => {
                if (!/^[0-9]\d*$/.test(value)) {
                    callback(new Error("请输入数字"));
                } else {
                    this.hasEventNumber(value, data => {
                        if (data) {
                            callback();
                        } else {
                            return callback(new Error("工单号已存在"));
                        }
                    });
                }
            }, 800);
        };
        return {
            dialogVisible: false,
            messageDis: false, //发送按钮是否禁用
            activeIndex: -1, //当前显示的box，1代表快捷短信，2代表创建事件
            showBox: false,
            libList: [], //知识库list
            libActive: "", //选中的知识库树
            formConfig: [
                {
                    label: "工单号：",
                    type: "input",
                    placeholder: "请输入工单号",
                    code: "eventNumber",
                    maxlength: 50
                },
                {
                    label: "事件标题：",
                    type: "input",
                    placeholder: "请输入事件标题",
                    code: "eventTitle",
                    maxlength: 30
                },
                {
                    label: "事件类别：",
                    type: "select",
                    placeholder: "请选择事件类别",
                    code: "eventType",
                    data: []
                },
                {
                    label: "事件描述：",
                    type: "textarea",
                    placeholder: "请输入事件描述",
                    code: "eventDesc",
                    maxlength: 300
                },
                {
                    label: "事件关键词：",
                    type: "input",
                    placeholder: "请输入事件关键字",
                    code: "eventKeyword",
                    maxlength: 100
                },
                {
                    label: "处理单位：",
                    type: "select",
                    placeholder: "请选择处理单位",
                    code: "disposalUnitCode",
                    data: []
                },
                {
                    label: "事件来源：",
                    type: "select",
                    placeholder: "请选择来源",
                    code: "eventSourceCode",
                    data: []
                },
                {
                    label: "本级到期时间：",
                    type: "datePicker",
                    placeholder: "请选择时间",
                    code: "myLimitTime"
                },
                {
                    label: "市级到期时间：",
                    type: "datePicker",
                    placeholder: "请选择时间",
                    code: "highLimitTime"
                },
                {
                    label: "反应人：",
                    type: "input",
                    placeholder: "反应人",
                    code: "reporterName",
                    value: ""
                },
                {
                    label: "电话号码：",
                    type: "span",
                    placeholder: "请输入号码",
                    code: "telNo",
                    value: ""
                },
            ],
            ruleForm: {
                eventNumber: "",
                eventTitle: "",
                eventType: "",
                eventDesc: "",
                eventKeyword: "",
                disposalUnitCode: "",
                eventSourceCode: "",
                telNo: "",
                reporterName: "",
                telId: "",
                myLimitTime: "",
                highLimitTime: ""
            },
            rules: {
                eventNumber: [
                    {
                        required: true,
                        message: "请输入工单号",
                        trigger: "change"
                    },
                    { validator: validateEventNumber, trigger: "change" }
                ],
                eventTitle: [
                    {
                        required: true,
                        message: "请输入事件标题",
                        trigger: "change"
                    }
                ],
                eventType: [
                    {
                        required: true,
                        message: "请选择事件类别",
                        trigger: "change"
                    }
                ],
                eventDesc: [
                    {
                        required: true,
                        message: "请输入事件描述",
                        trigger: "change"
                    }
                ],
                eventKeyword: [
                    {
                        required: true,
                        message: "请输入事件关键字",
                        trigger: "change"
                    }
                ],
                disposalUnitCode: [
                    {
                        required: true,
                        message: "请选择处理单位",
                        trigger: "change"
                    }
                ],
                eventSourceCode: [
                    {
                        required: true,
                        message: "请选择来源",
                        trigger: "change"
                    }
                ],
                myLimitTime: [
                    {
                        required: true,
                        message: "请选择时间",
                        trigger: "change"
                    }
                ],
                highLimitTime: [
                    {
                        required: true,
                        message: "请选择时间",
                        trigger: "change"
                    }
                ],
                reporterName: [
                    {
                        required: true,
                        message: "请填写反应人",
                        trigger: "change"
                    }
                ],
            },
            request: {
                pageNum: 1,
                pageSize: 10,
                keyword: ""
            },
            websocketData: {} //websocket传进来的数据
        };
    },
    mounted() {
        this.pubsub_token = Pubsub.subscribe(
            "showInComingTipDialog",
            (type, args) => {
                setTimeout(() => {
                    this.$refs.ruleForm && this.$refs.ruleForm.clearValidate();
                }, 0);
                this.websocketData = args;
                this.dialogVisible = true;
                this.cancelCreate();
                this.ruleForm = {
                    eventNumber: "",
                    eventTitle: "",
                    eventType: "",
                    eventDesc: "",
                    eventKeyword: "",
                    disposalUnitCode: "",
                    eventSourceCode: "",
                    telNo: args.telOtherNum || "",
                    // reporterName: args.contacts || "",
                    telId: args.id || "",
                    myLimitTime: "",
                    highLimitTime: ""
                };
            }
        );
        this.getDictCode();
    },
    destroyed() {
        this.pubsub_token && Pubsub.unsubscribe(this.pubsub_token);
    },
    methods: {
        /**
         * 判断工单号是否存在
         */
        hasEventNumber(eventNumber, cb) {
            ZHZXEventInfoEventNumberCanUse({ eventNumber }).then((res = {}) => {
                cb(res.data);
            });
        },
        /**
         * 取消创建
         */
        cancelCreate() {
            this.activeIndex = -1;
            this.showBox = false;
        },
        /**
         * 提交
         */
        onSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    ZHZXEventInfoAdd(this.ruleForm).then(res => {
                        this.$message({
                            message: "新增成功",
                            type: "success"
                        });
                        this.$emit("callback");
                        this.dialogVisible = false;
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        /**
         * 创建事件/快捷短信按钮
         */
        onHandleClick(type) {
            this.showBox = true;
            this.activeIndex = type;
            if (type == "1") {
                this.getLibList();
            }
        },
        /**
         * 重置知识库搜索
         */
        reset() {
            this.request.keyword = "";
            this.getLibList();
        },
        /**
         * 获取数据字典--取件类型
         */
        getDictCode() {
            findByDictCode({ dictCode: "eventType" }).then((res = {}) => {
                this.formConfig.find(item => item.code == "eventType").data =
                    res.data || [];
            });
            findByDictCode({ dictCode: "eventSourceCode" }).then((res = {}) => {
                this.formConfig.find(item => item.code == "eventSourceCode").data =
                    res.data || [];
            });
            departmentGetDepartment({}).then((res = {}) => {
                let { data } = res;
                if (data && data.length) {
                    data.map((item, index) => {
                        item.dictDataName = item.name;
                        item.dictDataCode = item.id;
                    });
                    this.formConfig.find(
                        item => item.code == "disposalUnitCode"
                    ).data = data || [];
                }
            });
        },
        getLibList() {
            const { request } = this;
            knowledgeLibQueryAll(request).then((res = {}) => {
                this.libList = res.rows;
                this.libActive = ""; //重置选择项目
            });
        },
        /**
         * 点击知识库项
         * */
        clickLibItem(item) {
            this.libActive = item || {};
        },
        /**
         * 发送短信
         * */
        pushSmsSend() {
            if (this.libActive) {
                let content = this.libActive.content || {};
                let telNo = this.websocketData.telOtherNum || "";
                this.messageDis = true;
                smsSend({ content, telNo })
                    .then((res = {}) => {
                        this.$message({
                            message: "发送成功",
                            type: "success"
                        });
                        this.libActive = "";
                        this.messageDis = false;
                        this.cancelCreate();
                    })
                    .catch(err => {
                        this.libActive = "";
                        this.messageDis = false;
                        console.warn(err);
                    });
            } else {
                this.$message({
                    message: "请先选中左侧知识库标题",
                    type: "warning"
                });
            }
        }
    }
};
</script>

<style lang = "scss" scoped>
@import "../../css/unifyAcceptWorkbench.scss";

.tip-dialog {
    /* position: relative; */
    /* left:30%; */
    transition: all 0.3s ease-in-out;
}
.show-box {
    left: -80vmin;
}
.w-100 {
    width: 100%;
}
.tip-content {
    text-align: center;
    padding: 30px 0 15px 0;
    box-sizing: border-box;
    height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.come-tel {
    font-size: 40px;
    color: #1a36a9;
}
.come-name {
    font-size: 30px;
    color: #1a36a9;
}
.local-tel {
    font-size: 20px;
    span {
        color: #999;
        & + span {
            color: #1a36a9;
        }
    }
}
.tel-icon {
    position: absolute;
    left: 20px;
    top: 54px;
}
.button-row {
    padding: 20px 0;
    display: flex;
    justify-content: center;
    border-top: 1px solid #eee;
    button {
        width: 130px;
        height: 42px;
        background: #1a36a9;
        color: #fff;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        &:first-child {
            margin-right: 40px;
        }
        img {
            margin-right: 10px;
        }
    }
}
.msg-detail {
    position: absolute;
    left: 100%;
    margin-left: 15px;
    background: #fff;
    top: 0px;
    width: 80vmin;
    height: 300px;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 9999;
    &:before {
        content: "";
        display: block;
        position: absolute;
        display: block;
        margin-top: -12px;
        top: 50%;
        left: -16px;
        height: 0;
        width: 0;
        border-top: 24px solid transparent;
        border-bottom: 24px solid transparent;
        border-right: 28px solid #fff;
        /* box-shadow: 0.5px 0.9px 2px 0px rgba(153, 153, 153, 0.48); */
        z-index: 9;
    }
}
.create-detail {
    width: 450px;
    height: auto;
    top: -40px;
}
.create-content {
    background: #fff;
    padding: 25px 0 0 0;
}
.title-row {
    height: 34px;
    line-height: 34px;
    background: #1a36a9;
    color: #fff;
    padding-left: 15px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.msg-content {
    display: flex;
    height: 100%;
    .left-content {
        width: 50%;
        border-right: 1px solid #eee;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: 100%;
        padding-bottom: 15px;
        /* padding:0 15px; */
    }
    .right-content {
        width: 50%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }
    .msg-title-row {
        padding: 20px 15px;
        color: #1a36a9;
        span {
            display: block;
            padding-left: 10px;
            border-left: 2px solid #1a36a9;
            height: 14px;
            line-height: 14px;
        }
        &.line {
            border-bottom: 1px solid #eee;
        }
    }
    .search-row {
        display: flex;
        position: relative;
        margin-bottom: 25px;
        padding: 0 20px;
        .reset-btn {
            position: absolute;
            background: #fff;
            top: 9px;
            right: 62px;
            &:active {
                opacity: 1;
            }
        }
    }
    .search-input {
        /* flex: 1; */
        box-sizing: border-box;
        height: 34px;
        background-color: #fff;
        border: solid 1px #dcdcdc;
        padding-left: 15px;
        font-size: 14px;
        width: 100%;
        /* padding-right: 60px; */
    }
    .search-btn {
        background: #fff;
        padding: 0 10px;
        position: absolute;
        right: 22px;
        top: 7px;
        &:active {
            opacity: 1;
        }
        img {
            height: 20px;
            width: 20px;
        }
    }
    .kn-ul {
        padding: 0 15px;
        flex: 1;
        overflow: auto;
        cursor: pointer;
        li {
            padding: 0 15px;
            &.active {
                background: #edf1ff;
            }
            .kn-list {
                .target {
                    height: 20px;
                    width: 20px;
                    background: #1a36a9;
                    border-radius: 3px;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 20px;
                }
                display: flex;
                padding: 10px 0;
                border-bottom: 1px solid #eee;
            }
        }
    }
    .reply-content {
        padding: 20px 20px 10px 20px;
        flex: 1;
        overflow: auto;
    }
    .msg-disabled {
        color: #aaa;
    }
    .reply-handle-row {
        display: flex;
        padding: 10px 10px 10px 0;
        .reply-tel {
            flex: 1;
            margin-right: 10px;
            background: #f3f3f3;
            color: #1a36a9;
            font-size: 20px;
            line-height: 5vmin;
            padding-left: 20px;
        }
        button {
            background: #1a36a9;
            width: 9vmin;
            height: 5vmin;
            color: #fff;
        }
    }
}
.footer-btn {
    width: 66px;
    height: 32px;
    border-radius: 3px;
    &:active {
        opacity: 0.8;
    }
}
.sure {
    background-color: #1a36a9;
    color: #fff;
}
.cancel {
    background-color: #d2d2d2;
    margin-right: 40px;
}
.dialog-footer {
    display: flex;
    padding: 20px 0;
    margin-top: 20px;
    justify-content: center;
    border-top: 1px solid #eee;
}
</style>